<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float属性例子</title>
    <style>
        html {
            font-size: 12px;
        }

        #example0 {
            width: 320px;
        }

        .div-image {
            float: left;    /*向左浮动*/
        }

        .div-float0 {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            margin: 5px;
            float: left;
        }

        .div-float1 {
            width: 300px;
            height: 170px;
            border: 1px solid green;
            margin: 5px;
            float: right;
        }

        .example2 {
            overflow: hidden; /*清除浮动*/
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <article id="example0">
        <h1>环绕效果（设置float属性的最初目的）</h1>
        <div class="div-image"><img src="../images/login_logo.jpg" style="margin:5px;"></div>
        <div>浮动属性是float，其可能的取值分别是：right、left、none。
            float 属性是对块级元素的设定，最早的设计目的是用于文字在图片周围的环绕显示。这种文字环线的效果主要是由于浮动元素脱离了标准文档流，使其下面的元素上移，从而占据的原来浮动元素的位置而造成的。
            float:left，表示失去块级元素特征，元素自身向左浮动，直到遇上左边的其他元素，或遇到父容器为止。
            float:right，表示失去块级元素特征，元素自身向右浮动，直到遇上右边的其他元素，或遇到父容器为止。
        </div>
    </article>
    <article id="example1" style="overflow: hidden;">
        <h1>浮动效果（float属性目前的常用效果）</h1>
        <div class="div-float0">
            当块级标签使用float属性后，会部分的脱离标准文档流，并且浮动起来。此时该标签之后的元素会顶替掉该标签的位置。
        </div>
        <div class="div-float1">
            浮动属性是float，其可能的取值分别是：right、left、none。
            float 属性是对块级元素的设定，最早的设计目的是用于文字在图片周围的环绕显示。这种文字环线的效果主要是由于浮动元素脱离了标准文档流，使其下面的元素上移，从而占据的原来浮动元素的位置而造成的。
        </div>
    </article>
    <article class="example2">
        <div class="div-float0">example2中的div</div>
        <div></div>
    </article>
</body>

</html>